import React, { Component } from "react";

/*
  todo 事件传参问题

  todo 1. 使用内联的bind(this, xxx), bind会产生新函数，新函数不会自动调用，并且bind的第二个参数会作为新函数的第一个参数, 不推荐，会增加内存

  todo 2. 使用内联的箭头函数，多套了一层，触发外层，里层自动执行, 不是特别推荐，因为会产生新函数增加内存, 但是这是项目里面用的最多的方式

  todo 3. 柯里化函数，外层自动调用，里层点击后调用, 最推荐的方式
*/

class App extends Component {
  state = {
    list: [
      {
        id: 1,
        name: "zhangmou",
      },
      {
        id: 2,
        name: "junmou",
      },
    ],
  };

  // remove = (id, e) => {
  //   console.log(id, e);
  // };

  // remove = (id) => {
  //   return () => {
  //     console.log(id);
  //   };
  // };

  remove = (id, num) => (e) => {
    // e.stopPropagation();
    console.log(id, e, num);
  };

  render() {
    return (
      <>
        <h2>事件传参</h2>
        <ul>
          {this.state.list.map((item) => (
            <li key={item.id}>
              {item.name} -{" "}
              {/* <button onClick={this.remove.bind(this, item.id)}>删除</button> */}
              {/* <button onClick={(e) => this.remove(item.id, e)}>删除</button> */}
              <button onClick={this.remove(item.id, 123)}>删除</button>
            </li>
          ))}
        </ul>
      </>
    );
  }
}

export default App;
